<template>
  <div class="contentWrap" ref="container">
    <van-sticky :container="container" :offset-top="44" z-index="1">
      <div class="classifyname">
        <span class="classifyname-title">{{ classitem.classifyname }}</span>
      </div>
    </van-sticky>
    <div class="classifyitem" v-if="truelist">
      <div
        class="item-content"
        v-for="item in truelist"
        :key="item.itemid"
        @click="toItemdetail(item.itemid)"
      >
        <div class="content-header">
          <div class="content-thumb">
            <div class="content-image" style="width: 100%; height: 100%">
              <img :src="item.itemimg" alt="" />
            </div>
          </div>
          <div class="content-content">
            <div>
              <div class="content-card-title content-multi-ellipsis-l2">
                {{ item.itemname }}
              </div>
              <div class="content-desc">
                <span class="content-desc-sellnum"
                  >月售{{ item.itemsellnum }}&emsp;</span
                >
                <span class="content-desc-cmt"
                  >{{ item.itemcmt }}&ensp;</span
                >
              </div>
              <div class="content-price">
                <span class="content-price-price"
                  >￥{{ item.itemprice }}</span
                >
                <Cardcontrol :count="item.itemid" :sellnum="item.sellcount" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Cardcontrol from "@/components/Cardcontrol";
import { ref } from "@vue/reactivity";
import { computed } from "@vue/runtime-core";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
export default {
  props: {
    classitem: Object,
    itemlist: Array
  },
  setup(props) {
    const router = useRouter();
    const store = useStore();
    const route = useRoute()
    const container = ref(null);
    const truelist = computed(() => {
      let newarr = [];
      for (let item of props.classitem.classifyitem) {
        let [newarr_item] = props.itemlist.filter((e) => {
          if (e.itemid === item.item_id) {
            return e;
          }
        });
        newarr.push(newarr_item);
      }
      return newarr;
    });

    const toItemdetail = (e) => {
      router.push(`/Itemdetail/${route.params.id}`);
      store.state.itemdetailid = e
    };
    return {
      container,
      truelist,
      toItemdetail,
    };
  },
  components: {
    Cardcontrol,
  },
};
</script>

<style lang="less" scoped>
.contentWrap {
  width: 100%;
  .classifyname {
    background: #fff;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    .classifyname-title {
      line-height: 40px;
      font-size: 16px;
      padding: 10px 10px;
      font-weight: 550;
    }
  }
  .classifyitem {
    .item-content {
      border-radius: 10px;
      position: relative;
      box-sizing: border-box;
      padding-bottom: 3.5vh;
      padding-left: 1.2vh;
      width: 98%;
      height: 15vh;
      color: #323233;
      background: #fdfffd;
      .content-header {
        display: flex;
        .content-thumb {
          position: relative;
          flex: none;
          width: 88px;
          height: 88px;
          margin-right: 8px;
          .content-image {
            position: relative;
            display: inline-block;
            background-color: #111;
            overflow: hidden;
            border-radius: 6px;
            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
        }
        .content-content {
          position: relative;
          display: flex;
          flex: 1;
          flex-direction: column;
          justify-content: space-between;
          min-width: 0;
          min-height: 88px;
          div {
            display: block;
            .content-card-title {
              max-height: 32px;
              font-weight: 800;
              line-height: 30px;
              font-size: 20px;
            }
            .content-desc {
              line-height: 10px;
              .content-desc-cmt,
              .content-desc-sellnum {
                color: #a8aaaa;
                line-height: 20px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 12px;
              }
            }
            .content-price {
              justify-content: space-between;
              display: flex;
              transform: translateY(15px);
              line-height: 10px;
              .content-price-price {
                color: #fb5249;
                font-weight: 600;
                line-height: 20px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
}
</style>